﻿/*

            This file is part of the mojomo modular front end design framework for mojoPortal CMS; 
            find more at mojomo.co.uk or mojomo.codeplex.com	

Name:       header.css

Author:     freshangle.co.uk

Version:    1.0

Purpose:    This css file addressses the header area of the page; site logo, strapline and a 
            header feature div for any extra images or contact details...   
    
            See also "Your logo is an image, not a h1" at csswizardry.com/2010/10/your-logo-is-an-image-not-a-h1/ and
            set SiteTitle in theme.skin to get the mojoPortal control to use your element of choice
        
    
*/

																		
/*   text logo  */



	#logo { float: left ;clear: left}
    .siteheading    {color: #1B1B1B; text-transform: lowercase; margin-bottom:0; margin-left:-0.04em; margin-top: -0.25em }
	.siteheading a  {text-decoration:none !important}
    
    .siteheading, 
    .slogan { 
		
				transition:all .2s linear; 
				-o-transition:all .2s linear; 
				-moz-transition:all .2s linear; 
				-webkit-transition:all .2s linear;
				
				text-shadow: 0 3px rgba(255, 255, 255, 0.75);
				
	}
	


    /* MOBILE */
    @media only screen and (min-width: 0px)	 {
    
          .siteheading {  font-size:2em; }
          .slogan {  font-size:0.95em; }  	 
    }
    /* MOBILE LANDSCAPE */
    @media only screen and (min-width: 540px) {	
    
          .siteheading {  font-size:2.3em; }
          .slogan {  font-size:1.25em;}   
    	
    }
    /* SMALL TABLET */
    @media only screen and (min-width: 620px) {
    
          .siteheading {  font-size:2.5em; }
          .slogan {  font-size:1.5em; }   
         
    }




/*Your logo is an image, not a h1....*/ 

		/*#logo, #logo img {display:block;width:auto; height:auto;}*/
        
		/* Based on the fact that we need to use an <img /> in our markup, let’s hide the actual
        image and use a background on the <a>--this gives us semantically sound markup 
        and the ability to use sprites for hover effects! */        
	
        /*
        #logo { background:url(/path/to/logo);}            
		#logo:hover{ background-position:0 -00px;}
		#logo img{ position:absolute;left:-99999px;
        */
            
            
      
		

	
/*   headerfeature  */	 	
        


/* as a css shape....*/

@media screen and (min-width:0px) {

         #headerfeature { display: none }
    
}


@media screen and (min-width:440px) {
                    

        #headerfeature { display: block;margin: 0.75em  0.75em 1.5em 0.75em }

		#headerfeature 
		{ float: right; background: red; width: 80px; height: 80px; position: relative; text-align: center; background: red;}
		
		#headerfeature:before, #headerfeature:after
		{ content: ""; position: absolute; top: 0; left: 0; height: 80px; width: 80px; background: red; }
	
		#headerfeature:before 
		{  -webkit-transform: rotate(30deg); -moz-transform: rotate(30deg); -ms-transform: rotate(30deg); -o-transform: rotate(30deg); }
	
		#headerfeature:after 
		{  -webkit-transform: rotate(60deg); -moz-transform: rotate(60deg); -ms-transform: rotate(60deg); -o-transform: rotate(60deg); }



             
}

@media screen and (min-width:600px) {

          #headerfeature { display: block;margin: 1.5em  }
    
}
       








	
